import React from 'react';
import jQuery from "jquery";
import Moment from "moment";
import MyEchart from "../myEchart";

const globalConfig = require("../../js/globalConfig");

class Pres extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            url: globalConfig.url + "/getPressure",
            data_1: new Array(20).fill(0),
            data_2: new Array(20).fill(0),
            xData: new Array(20).fill(0),
            isMount: true,
            option: {
                legend: {
                    data: ["主井", "副井"],
                    right: 20
                },
                tooltip: {},
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: "时间",
                    }
                ],
                yAxis: [
                    {
                        name: "压力(MPa)",
                        type: 'value',
                    }
                ],
                series: [
                    {
                        symbol: 'circle',
                        name: "主井",
                        type: "line",
                        smooth:"true",
                        itemStyle: {
                            normal: {
                                color: '#ff7875',
                                lineStyle: {
                                    color: '#ff7875'
                                }
                            }
                        }
                    },
                    {
                        symbol: 'rect',
                        name: "副井",
                        type: "line",
                        smooth:"true",
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: {
                                    color:"#91cc75"
                                }
                            }
                        }
                    }
                ],
                grid: {
                    top: 50,
                    left: 45,
                    right: 45,
                    bottom: 25
                }
            },
        }
    }



    componentDidMount() {
        const instance = this.myEchart.echartsReact.getEchartsInstance();
        //用于查询时的放大页面
        if (this.props.option) {
            instance.setOption(this.props.option);
        }
        this.timerID = setInterval(() => {
            var this_ = this;
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        const newData_1 = this_.state.data_1.slice();
                        const newData_2 = this_.state.data_2.slice();
                        const newXData = this_.state.xData.slice();
                        newData_1.push(Math.random());
                        newData_2.push(Math.random());
                        newXData.push(Moment(new Date()).format("HH:mm:ss"));
                        newData_1.shift();
                        newData_2.shift();
                        newXData.shift();
                        this_.setState({
                            data_1: newData_1,
                            data_2: newData_2,
                            xData: newXData,
                        });


                        instance.setOption({
                            xAxis: { data: this_.state.xData },
                            series: [
                                { data: this_.state.data_1 },
                                { data: this_.state.data_2 },
                            ]
                        });
                    }
                });
            }
        }, 500);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (
            <MyEchart ref={e => { this.myEchart = e; }} option={this.state.option}/>
        );
    }
}

export default Pres;